<template>
    <div v-loading="showLoading" style="min-height:80px" class="own_article_list">
        <div  v-for="article in articleList" :key="article.articleId"
            class="own_article_item">
            <div>
                <article-component :title="article.articleTitle" :desc="article.articleDesc"
                    :authorPic="article.authorPicUrl" :cover="article.articleCoverUrl" :id="article.articleId"
                    :eye="article.articleEye" :comment-count="article.commentCount" :timestamp="article.articleDate"
                    :nickName="article.articleNickname" />
                <el-divider border-style="dotted" />
            </div>
        </div>
    </div>
    <el-pagination style="display:flex;justify-content: center;" background layout="prev, pager, next"
        :hide-on-single-page="true" :page-count="pages" :page-size="pageSize" />
        <!-- <el-pagination background layout="prev, pager, next" :total="10" :page-size="5" /> -->
    <el-empty description="这里空空如也" v-if="articleList != null && articleList.length == 0" />
</template>

<script>
import ArticleComponent from './ArticleComponent.vue';

export default {
    components: { ArticleComponent },
    data() {
        return {
            articleList: null,
            showLoading:true,
            pages:1,
            current:1,
            pageSize:10
        }
    },
    created() {
        this.getCollegeArticleList(this.$store.state.area.collegeId, 1, this.pageSize)
    },
    methods: {
        getCollegeArticleList(collegeId, page, pageSize) {
            this.articleList = null
            this.$fetchutil.get('/browse/article/article_college?collegeId=' + collegeId + '&page=' + page + '&pageSize=' + pageSize, data => {
                this.articleList = data.data.data
                this.pages=data.data.pages
                this.current=data.data.current
            })
        },
        refreshArticle() {
            // this.getCollegeArticleList(this.$store.state.area.collegeId, 1, 2)
        }
    },
    watch: {
        '$store.state.area.collegeId'() {
            this.getCollegeArticleList(this.$store.state.area.collegeId, 1, this.pageSize)
        },
        articleList() {
            if (this.articleList == null || this.articleList == []) return
            this.articleList.sort((article1, article2) => article2.articleDate - article1.articleDate)
            this.showLoading=false
        }
    }
}
</script>

<style scoped>
.own_article_list {
    display: flex;
    flex-wrap: wrap;
}

.own_article_item {
    padding: 10px;
    width: 50%;
}
</style>